﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>jSearcharoo - AJAX search with JSON and jQuery (and Searcharoo)</title>
  <script type="text/javascript" src="javascript/jquery-1.3.2.min.js"></script>
  <script type="text/javascript">
  // bit of jquery help
  // http://shashankshetty.wordpress.com/2009/03/04/using-jsonresult-with-jquery-in-aspnet-mvc/
  function search()
  {
    var q = $('#query').attr("value")
    $('#results').html(""); // clear previous
    var u = "http://"+location.host+"/SearchJson.aspx?searchfor=" + q;
    $("#contentLoading").css('visibility',''); // from Russ @ tinisles.blogspot.com
    $.getJSON(u,
        function(data){ 
          $.each(data, function(i,result){ 
            $("<div/>").html('<a href="'+ result.url+'">'+result.name +'</a>'
                            +'<br />'+ result.description
                            +'<br /><span class="little">'+ result.url +' - '
                            + result.size +' bytes - '
                            + result.date +'</span>').appendTo("#results");
          });
        $("#contentLoading").css('visibility','hidden');
        });
  }
  
  
  </script>
<style type="text/css">a{font-weight:bold;} a,h1,div,p{font-family:tahoma,ariel}
.little{font-size:small;color:green;} h1{color:orange;}</style>
</head>
<body>
  <h1>jSearcharoo (Searcharoo + jQuery)</h1>

  <input name="query" id="query" value="dollar" />
  <input type="button" onclick="search();" value="search" />
    <div id="results">
    <p>Type a query and press [search]</p>
  </div><img id="contentLoading" src="/javascript/loading.gif" style="visibility:hidden"/><!-- http://preloaders.net/ -->
  <p><a href="http://jquery.com/">powered by jQuery!</a> <i>View Source</i> to see how simple jQuery/AJAX/JSON can be!</p>
</body>
</html>